<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    /*
    * for(let i = 0;i < 5;i++){ //因为let声明的i是在这个块级作用域里面 而且let不能重复声明 所以这里一次性生成了5个独立的块级作用域 即
    *   //{let i = 0}
    *   //{let i = 1}
    *   //{let i = 2}
    *   //{let i = 3}
    *   //{let i = 4}
    *   console.log(i) //会打印 0 1 2 3 4
    * }
    *
    * console.log(i) //会报错 i is not defined 因为let声明的i只存在于前面的块级作用域里面 不能被外部访问
    *
    *
    * */





    /*
    *点击每一个li 打印每一个li的innerHTML
    *   限制要求 请不要使用let/const,用var
    *
    *
    * */
    //liList就是li的数组 里面有4个元素
    var liList = document.querySelectorAll(".list li")

    //这里var声明的变量，是可以突破代码块被外界访问的，所以这个for循环里的i在循环结束之后相当于是一个全局变量，并且循环结束之后它的值是4
    for(var i = 0;i < liList.length;i++){ //所以问题就在于用var声明的变量会突破代码块
        //循环是在做循环绑定点击事件 相当于在给每个元素添加点击事件
        //注意 循环和点击事件的顺序先后 是先循环结束 然后才能让用户点击 所以是循环在前 点击事件在后
        liList[i].onclick = function (){ //函数执行的时候，会优先在函数内部找i 但是函数内部没有定义i 就会去函数外部找i 外部for循环刚好用var声明了一个全局变量i
            console.log(liList[i]) //此时循环内部的这个点击函数没法获取i的下标 因为循环结束之后i会停在4 即现在i的值是全局变量中i的值4 然而
                                   //整个liList的长度就是4 最后一个下标i是3 所以点击下标时没办法访问到4(你点的是0 1 2 3 它这里却只有4)
        }
    }




</script>
</body>
</html>